<template>

    <div>
        <el-row>
            <el-col :span="12"><div class="grid-content bg-purple">


                    <el-image
                            style="height: 300px; width: 90%; border-radius: 10px"
                            :src="movie.moviePic" >

                    </el-image>
            </div>
            </el-col>
            <el-col :span="12"><div class="grid-content bg-purple-light"><div class="infomation-warp">
                <div class="center-warp" >
                    <h4 class="title">

                    </h4>
                    <div class="info">
                        <ul class="info-list">
                            <li>电影名:{{movie.movieName}}</li>
                            <li>语言:{{movie.language}}</li>
                            <li>导演：{{actor}}
<!--                                <el-table-column prop="score" label="评分" :show-overflow-tooltip="true" align="center">-->
<!--                                <template slot-scope="scope">-->
<!--                                    <span>-->
<!--                                        <span v-for=" (val, key , i) in scope.row.dimItemMap" :key="key">-->
<!--                                            {{key}}//键-->
<!--                                            {{val.score}}//val.score为值-->
<!--                                        </span>-->
<!--                                    </span>-->
<!--                                </template>-->
<!--                            </el-table-column>-->
                            </li>
                            <li>主演：<span v-for="act in acts">{{act}}</span></li>
                            <li>类型：<span v-for="Type in movieType">{{Type }}</span></li>
                            <li>制片地区/国家：{{movie.source}}</li>
                            <li>时长：{{movie.time}}</li>
                            <li>剧情介绍：{{movie.introduction}}</li>
                            <li>上映时间:{{movie.insertTime}}</li>
                            <li>评分:{{movie.score/movie.peoples | toFixed}}</li>
                            <li>票房:{{movie.boxOffice}}</li>
                            <li>想看:{{movie.want}}</li>
                        </ul>

                    </div>
                </div>
            </div></div></el-col>
        </el-row>

    </div>

</template>


<script>
    export default {
        name: "WebMovieDetailPageView.vue",
        data() {
            return {
                loading: true,
                tableData: [],
                movieTypes: [],
                movieType: [],
                select: '',
                input: '',
                total: '',
                pageSize: '',
                page: 1,
                movie: this.$route.query.movie,
                actor: '',
                acts:[]
            }
        },
        created() {
          this.handlefinddirectorbymovieid()
            this.handlefindmovieTypebymovieid()
            this. handlefindactsbymovieid()
        },
        methods:{
           handleFindMovieById(id) {
               this.$router.push({path: "/web/movie/findMovieById", query: {
                       movieId: id
                   }})
           },
            handlefinddirectorbymovieid(){
                this.axios.get("/web/movie/finddirectorbymovieid",{params:{movieId: this.$route.query.movie.id}}).then(response => {
                    this.actor = response.data.msg
                })
            },
            handlefindmovieTypebymovieid(){
                console.log(this.$route.query.movie.id)
               this.axios.get("/web/movie/findmovieTypebymovieid",{params:{id:this.$route.query.movie.id}}).then(response =>{
                   this.movieType=response.data.data
               })
            },
            handlefindactsbymovieid(){
               this.axios.get("/web/movie/findactsbymovieid",{params:{id:this.$route.query.movie.id}}).then(response =>{
                   this.acts=response.data.data
               })
            }

        }
    }
</script>

<style scoped>
    .el-select .el-input {
        width: 130px;
    }
    .input-with-select .el-input-group__prepend {
        background-color: #fff;
    }
</style>